<template>
    <!--地图挂载dom-->
    <div id="map" ref="mapRef">
    </div>
</template>

<script>
    //引入依赖
    import {Map, View} from 'ol'
    import {WMTS} from 'ol/source'
    import {Tile as TileLayer} from 'ol/layer';
    import WMTSTileGrid from 'ol/tilegrid/WMTS';
    import {Projection} from 'ol/proj'

    export default {
        name: 'ProjectGeoServerWMTS',
        data() {
            return {
                map: null,
            }
        },
        mounted() {

            //初始化地图
            var gridsetName = 'EPSG:4326';
            var gridNames = ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18', 'EPSG:4326:19', 'EPSG:4326:20', 'EPSG:4326:21'];
            var style = '';
            var format = 'image/png';
            var layerName = 'guangzhou:gz';
            var projection = new Projection({
                code: 'EPSG:4326',
                units: 'degrees',
                axisOrientation: 'neu'
            });
            var resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5, 2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6, 2.682209014892578E-6, 1.341104507446289E-6, 6.705522537231445E-7, 3.3527612686157227E-7];
            let baseParams = ['VERSION', 'LAYER', 'STYLE', 'TILEMATRIX', 'TILEMATRIXSET', 'SERVICE', 'FORMAT'];

            let params = {
                'VERSION': '1.0.0',
                'LAYER': layerName,
                'STYLE': style,
                'TILEMATRIX': gridNames,
                'TILEMATRIXSET': gridsetName,
                'SERVICE': 'WMTS',
                'FORMAT': format
            };
            var url = 'http://localhost:8080/geoserver/gwc/service/wmts' + '?'
            for (var param in params) {
                if (baseParams.indexOf(param.toUpperCase()) < 0) {
                    url = url + param + '=' + params[param] + '&';
                }
            }
            url = url.slice(0, -1);
            this.wmtsLayer = new TileLayer({
                opacity: 1, //图层透明度
                source: new WMTS({
                    //WMTS服务基地址
                    url: url,
                    layer: params['LAYER'],
                    matrixSet: params['TILEMATRIXSET'],
                    format: params['FORMAT'],
                    projection: projection,
                    tileGrid: new WMTSTileGrid({
                        tileSize: [256, 256],
                        extent: [-180.0, -90.0, 180.0, 90.0],
                        origin: [-180.0, 90.0],
                        //分辨率数组
                        resolutions: resolutions,
                        //矩阵标识列表，与地图级数保持一致
                        matrixIds: params['TILEMATRIX']
                    }),
                    style: params['STYLE'],
                    wrapX: true
                })
            });
            this.map = new Map({
                target: 'map',//指定挂载dom，注意必须是id
                layers: [
                    this.wmtsLayer
                ],
                //配置视图
                view: new View({
                    center: [113.24981689453125, 23.126468438108688],   //视图中心位置
                    resolutions: resolutions,
                    projection: projection,
                    zoom: 5   //缩放到的级别
                })
            });
            this.map.getView().fit([112.950439453125, 22.510986328125, 114.06005859375, 23.939208984375], this.map.getSize());
        },
        methods: {}
    }
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }
</style>
